<!-- widget grid -->
<section id="widget-grid" class="">
	<div class="row">
    	<div id="list-alert">
        </div>
    </div>
	<div class="row" >
		<article class="col-sm-12 col-md-12 col-lg-8" style="padding-left:13px;padding-right:5px">
			<div class="jarviswidget" id="wid-id-0"
				data-widget-colorbutton="false" data-widget-editbutton="false"
				data-widget-togglebutton="false" data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false" data-widget-custombutton="false"
				data-widget-sortable="false" style="height: 280px;">
				<header>
					<span class="widget-icon"> <i
						class="glyphicon glyphicon-stats txt-color-darken"></i>
					</span>
					<h2>资源使用趋势</h2>
				</header>
				<!-- widget div-->
				<!--<div class="no-padding">-->
				<!-- widget edit box -->
				<div class="jarviswidget-editbox"></div>
				<!-- end widget edit box -->
					<!-- content -->
				<div id="resourceEchart" class="chart txt-color-blue" style="height: 260px;"></div>
				<!-- end widget div -->
				<!--</div>-->
			</div>
		</article>
		<article class="col-sm-12 col-md-12 col-lg-4" style="padding-left:0px;padding-right:13px">
			<div class="jarviswidget" id="wid-id-1"
				data-widget-colorbutton="false" data-widget-editbutton="false"
				data-widget-togglebutton="false" data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false" data-widget-custombutton="false"
				data-widget-sortable="false" style="height: 280px;">
				<header>
					<ul id="myTab" class="nav nav-tabs pull-right in ">
						<li class="active"><a href="#serverTab" data-toggle="tab">服 务</a></li>
						<li class=""><a href="#orderTab" data-toggle="tab">工 单</a></li>
						<li class=""><a href="#l3" data-toggle="tab">告 警</a></li>
					</ul>
				</header>
				<div class="widget-body" style="height: 260px;">
					<div id="myTabContent" class="tab-content  no-padding-bottom">
						<div class="tab-pane fade " id="orderTab">
							<br>
							<div class="row show-stats">
								<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
									<span class="text"> 未审批 <span id="orderUnapproveText" class="pull-right"></span>
									</span>
									<div class="progress">
										<div id="orderUnapproveBar" class="progress-bar bg-color-blueDark"></div>
									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
									<span class="text"> 审批通过 <span id="orderApprovedText" class="pull-right"></span>
									</span>
									<div class="progress">
										<div id="orderApprovedBar" class="progress-bar bg-color-green"></div>
									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
									<span class="text">审批拒绝<span id="orderUnapprovedText" class="pull-right"></span>
									</span>
									<div class="progress">
										<div id="orderUnapprovedBar" class="progress-bar bg-color-red"></div>
									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
									<span class="text"> 已执行 <span id="orderExecutedText" class="pull-right"></span>
									</span>
									<div class="progress">
										<div id="orderExecutedBar" class="progress-bar bg-color-greenLight"></div>
									</div>
								</div>
							</div>
						</div>

						<div class="tab-pane fade in active" id="serverTab">
							<br>
							<div class="row show-stats">
								<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
									<span class="text">正常 <span id="serverPassingText" class="pull-right"></span>
									</span>
									<div class="progress">
										<div id="serverPassingBar" class="progress-bar bg-color-greenLight"></div>
									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
									<span class="text">告警 <span id="serverWarningText" class="pull-right"></span>
									</span>
									<div class="progress">
										<div id="serverWarningBar" class="progress-bar bg-color-yellow"></div>
									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
									<span class="text">异常 <span id="serverCriticalText" class="pull-right"></span>
									</span>
									<div class="progress">
										<div id="serverCriticalBar" class="progress-bar bg-color-red"></div>
									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
									<span class="text">未知 <span id="serverUnknownText" class="pull-right"></span>
									</span>
									<div class="progress">
										<div id="serverUnknownBar" class="progress-bar bg-color-greyLight"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="tab-pane fade " id="l3" >
							<br>
								<div class="row" >	
										
										<div class="col-xs-3 col-sm-3 col-md-6 col-lg-6">
										<img src="/upm_manager/icon/warning.png" style="width:40%" align="right" >
										</div>
										<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
										<span style="font-size:30px;">20000</span>
										<span style="color:#999;font-size:6px;">&nbsp;&nbsp;告警数量</span>
										</div>
								</div>
								<br>
								<br>
								<div class="row" >
										<div class="col-xs-3 col-sm-3 col-md-6 col-lg-6">
										<img src="/upm_manager/icon/false.png" style="width:40%" align="right">	
										</div>
										<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
											<span style="font-size:30px;"> 200</span>
											<span style="color:#999;font-size:6px;"> &nbsp;&nbsp;失败数量</span>
										</div>																			
								</div>
						</div>
					</div>
				</div>
			</div>
		</article>
	</div>
	<div class="row">
		<div class="col-sm-8 col-md-8 col-lg-4" style="text-align: center">
			<div class="well well-sm well-light">
				<div id="networkingCirCle" class="easy-pie-chart txt-color-green easyPieChart" data-percent="0" data-pie-size="150">
					<span class="percent percent-sign txt-color-green font-xl semi-bold"></span>
				</div>
				<span class="" style="font-size: 20px;"> &nbsp;网段分配率</span>
			</div>
		</div>
		<div class="col-sm-8 col-md-8 col-lg-4" style="text-align: center">
			<div class="well well-sm well-light" style="text-align: center">
				<div id="portCirCle" class="easy-pie-chart txt-color-blue easyPieChart" data-percent="0" data-pie-size="150">
					<span class="percent percent-sign txt-color-blue font-xl semi-bold"></span>
				</div>
				<span class="" style="font-size: 20px;"> &nbsp;端口分配率</span>
			</div>
		</div>
		<div class="col-sm-8 col-md-8 col-lg-4" style="text-align: center">
			<div class="well well-sm well-light">
				<div id="serverCirCle" class="easy-pie-chart txt-color-red easyPieChart" data-percent="" data-pie-size="150">
					<span class="percent txt-color-red font-xl semi-bold"></span>
				</div>
				<span class="badge bg-color-red"></span><span style="font-size: 20px;"> &nbsp;服务数量</span>
			</div>
		</div>
	</div>
	<div class="row">
		<!-- NEW WIDGET START -->
		<article class="col-sm-24 col-md-24 col-lg-12">
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget " id="wid-id-2"
				data-widget-colorbutton="false" data-widget-editbutton="false"
				data-widget-togglebutton="false" data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false" data-widget-custombutton="false"
				data-widget-sortable="false" style="height: 120px;">
				<header>
					<ul class="nav nav-tabs bordered">
						<li class="dropdown">
							<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><span id="clusterinfoText"></span> <b class="caret"></b></a>
							<ul id="clusterinfoUl" class="dropdown-menu">
							</ul>
						</li>
					</ul>
				</header>
				<!-- widget div-->
				<div class="jarviswidget-editbox"></div>
				<!-- end widget edit box -->
					<!-- content -->
				<div id="clusterinfoTab" class="tab-content padding-10">
					<div class="tab-pane fade in active" id="clusterinfoTabDiv">
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
							<div id="cpuCirCle" class="easy-pie-chart txt-color-orangeDark"
								data-percent="0" data-pie-size="50">
								<span class="percent percent-sign"></span>
							</div>
							<span class="easy-pie-title">CPU分配率 </span>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
							<div id="memCirCle" class="easy-pie-chart txt-color-greenLight"
								data-percent="0" data-pie-size="50">
									<span class="percent percent-sign"></span>
							</div>
							<span class="easy-pie-title">内存分配率 </span>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
							<div id="diskCirCle" class="easy-pie-chart txt-color-blue" data-percent="0"
									data-pie-size="50">
								<span class="percent percent-sign"></span>
							</div>
							<span class="easy-pie-title">磁盘分配率 </span>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
							<div id="hostCirCle" class="easy-pie-chart txt-color-darken" data-percent="0"
								data-pie-size="50">
								<span class="percent"></span>
							</div>
							<span class="easy-pie-title">主机数量 </span>
						</div>
					</div>
				</div>
			</div>
			<!-- end widget -->
		</article>
	</div>
</section>
<!-- end widget grid -->
<script src="js/echarts.min.js"></script>

<script src="js/spin.min.js"></script>
<script src="js/jquery.spin.js"></script>

<script src="js/util.js"></script>

<script type="text/javascript">
 	if(typeof(flag) != "undefined"){
	 	clearInterval(flag);
 	}
 	
	pageSetUp();
	/*
	 * PAGE RELATED SCRIPTS
	 */

	// pagefunction
	var pagefunction = function() {
		/*
		 * RUN PAGE GRAPHS
		 */

		// load all flot plugins
	};
	// end pagefunction
	// destroy generated instances 
	// pagedestroy is called automatically before loading a new page
	// only usable in AJAX version!
	var pagedestroy = function() {
		// destroy calendar
	
		//destroy flots		
	}
	// end destroy
	// run pagefunction on load
	pagefunction();
	
	//E-charts by Baidu,see http://echarts.baidu.com/tutorial.html
	var resourceEchart = echarts.init(document.getElementById('resourceEchart'));
	resourceEchart.showLoading();
	$('#serverTab').spin();
	$('#orderTab').spin();
	$('#clusterinfoTab').on('show.bs.dropdown', function () {
	});
	$('#clusterinfoTab').on('hide.bs.dropdown', function () {
	});
	sendGetWithoutLayer("/upm_manager/v1.0/dashboards/"+getSession("siteId")+"/resource",initResourceEchart,ListAlert,null);
	sendGetWithoutLayer("/upm_manager/v1.0/dashboards/"+getSession("siteId")+"/subserv_status",initSubservStatus,ListAlert,null);
	sendGetWithoutLayer("/upm_manager/v1.0/dashboards/"+getSession("siteId")+"/orders",initOrders,ListAlert,null);
	sendGetWithoutLayer("/upm_manager/v1.0/dashboards/"+getSession("siteId")+"/info",initInfo,ListAlert,null);
	sendGetWithoutLayer("/upm_manager/v1.0/clusters?site="+getSession("siteId"),initClusterinfoDropdown,ListAlert,null);
	
	function initResourceEchart(data){
		xData = [];
		seriesHostData = [];
		seriesContainerData = [];
		var date = new Date();
		$.each(data.data, function(k ,v){
			date.setTime(v.timestamp);
			xData.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/') + ' ' + (date.getHours() == '0' ? '00' : date.getHours()) + ':' + (date.getMinutes() == '0' ? '00' : date.getMinutes()));
			seriesHostData.push(v.hostCnt);
			seriesContainerData.push(v.containerCnt);
		});
		resourceEchart.setOption({
			title: {
				show: false
		        //text:'资源使用趋势'
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            label: {
		                backgroundColor: '#6a7985'
		            }
		        }
		    },
		    legend:{
		    	data: ['容器', '物理机'],
		    	left: '3%'
		    },
		    toolbox: {
		        feature: {
		        	dataView: {readOnly: true},
		        	magicType: {type: ['line', 'bar']},
		            saveAsImage: {}
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : false,
		            data: xData
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : [
		        {
		            name:'容器',
		            type:'line',
		            areaStyle: {normal: {}},
		            data: seriesContainerData
		        },
		        {
		            name:'物理机',
		            type:'line',
		            areaStyle: {normal: {}},
		            data: seriesHostData
		        }
		    ]
		});
		resourceEchart.hideLoading();
	}
	
	function initSubservStatus(data){
		var all = data.data.critical + data.data.warning + data.data.passing + data.data.unknown;
		$("#serverPassingText").text(data.data.passing + '/' + all);
		$("#serverPassingBar").width(Percent(data.data.passing, all));
		$("#serverWarningText").text(data.data.warning + '/' + all);
		$("#serverWarningBar").width(Percent(data.data.warning, all));
		$("#serverCriticalText").text(data.data.critical + '/' + all);
		$("#serverCriticalBar").width(Percent(data.data.critical, all));
		$("#serverUnknownText").text(data.data.unknown + '/' + all);
		$("#serverUnknownBar").width(Percent(data.data.unknown, all));
		$('#serverTab').spin(false);
	}
	
	function initOrders(data){
		var all = data.data.approved + data.data.unapprove + data.data.executed + data.data.unapproved;
		$("#orderApprovedText").text(data.data.approved + '/' + all);
		$("#orderApprovedBar").width(Percent(data.data.approved, all));
		$("#orderUnapproveText").text(data.data.unapprove + '/' + all);
		$("#orderUnapproveBar").width(Percent(data.data.unapprove, all));
		$("#orderExecutedText").text(data.data.executed + '/' + all);
		$("#orderExecutedBar").width(Percent(data.data.executed, all));
		$("#orderUnapprovedText").text(data.data.unapproved + '/' + all);
		$("#orderUnapprovedBar").width(Percent(data.data.unapproved, all));
		$('#orderTab').spin(false);
	}
	
	function initInfo(data){
		$("#networkingCirCle").data('easyPieChart').update(Math.round(data.data.networking.used / data.data.networking.all * 100));
		$("#portCirCle").data('easyPieChart').update(Math.round(data.data.port.used / data.data.port.all * 100));
		$("#serverCirCle").data('easyPieChart').update(100);
		$("#serverCirCle").data('easyPieChart').options.onStep = function(from, to, percent){
			$($("#serverCirCle").data('easyPieChart').el).find('.percent').text(data.data.service.all);
		}; 
	}
	
	function initClusterinfoDropdown(data){
		if(data.data.length > 0){
			initClusterinfoTab(data.data[0].id ,data.data[0].name);
		}
		$.each(data.data, function(k, v){
			var li = "<li><a href=\"#clusterinfoTabDiv\" onclick=\"initClusterinfoTab('"+v.id+"','"+v.name+"')\" data-toggle=\"tab\">"+v.name+"</a></li>"
			$("#clusterinfoUl").append(li);
		});
	}
	
	function initClusterinfoTab(id, name){
		$("#clusterinfoText").text(name);
		$('#clusterinfoTab').spin();
		$("#cpuCirCle").data('easyPieChart').update(0);
		$("#memCirCle").data('easyPieChart').update(0);
		$("#diskCirCle").data('easyPieChart').update(0);
		$("#hostCirCle").data('easyPieChart').update(0);
		sendGetWithoutLayer("/upm_manager/v1.0/dashboards/"+id+"/clusterinfo",initClusterinfoTabSucess,ListAlert,null);
	}
	
	function initClusterinfoTabSucess(data){
		if(data.data.cpu_free == null || data.data.cpu_all == null || data.data.cpu_all == 0){
			$("#cpuCirCle").data('easyPieChart').update(0);
		} else {
			$("#cpuCirCle").data('easyPieChart').update(Math.round((data.data.cpu_all - data.data.cpu_free) / data.data.cpu_all * 100));
		}
		if(data.data.memory_free == null || data.data.memory_all == null || data.data.memory_all == 0){
			$("#memCirCle").data('easyPieChart').update(0);
		} else {
			$("#memCirCle").data('easyPieChart').update(Math.round((data.data.memory_all - data.data.memory_free) / data.data.memory_all * 100));
		}
		if(data.data.volume_free == null || data.data.volume_all == null || data.data.volume_all == 0){
			$("#diskCirCle").data('easyPieChart').update(0);
		} else {
			$("#diskCirCle").data('easyPieChart').update(Math.round((data.data.volume_all - data.data.volume_free) / data.data.volume_all * 100));
		}
		if(data.data.hostCnt == null){
			$("#hostCirCle").data('easyPieChart').update(0);
		} else {
			$("#hostCirCle").data('easyPieChart').update(100);
			$("#hostCirCle").data('easyPieChart').options.onStep = function(from, to, percent){
				$($("#hostCirCle").data('easyPieChart').el).find('.percent').text(data.data.hostCnt);
			}; 
		}
		$('#clusterinfoTab').spin(false);
	}
	
	function Percent(base, total){
		return Math.round(base / total * 100) + "%";
	}
</script>